<template>
  <el-dialog
    title="媒体报道模块预览"
    :visible.sync="previewDialogData.isShow"
    width="30%"
  >
    <div class="preview-box">
      <div
        class="img-box"
        :style="'background-image:url(' + previewData.imgInfo + ');'"
      ></div>
      <p>{{ previewData.title }}</p>
      <div class="bottom-info">
        <div class="user-info">
          <span class="uesr-avatar">
            <img :src="previewData.avatar" alt=" " />
          </span>
          <span class="user-name">{{ previewData.nickname }}</span>
        </div>
        <div class="release-time">{{ previewData.publishTime }}</div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="openNewWindow">打开文章链接</el-button>
      <el-button type="success" @click="toEdit">去修改</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { articleDetail } from '@/api/brandManage/aboutUs'

export default {
  props: ['previewDialogData'],
  data() {
    return {
      previewData: {}
    }
  },
  mounted() {
    const { id } = this.previewDialogData
    this.$nextTick(() => {
      articleDetail({ id }, (res) => {
        this.previewData = res
      })
    })
  },
  methods: {
    /* 打开链接 */
    openNewWindow() {
      window.open(this.previewData.link)
    },
    /* 去修改 */
    toEdit() {
      const { status } = this.previewData
      if (status === 'OPEN') {
        this.$alert('请先将文章下架，才可以进行编辑', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.previewDialogData.isShow = false
      this.$emit('previewToEdit', this.previewData.id)
    }
  }
}
</script>
<style lang="less" scoped>
.preview-box {
  width: 100%;
  height: 100%;
  .img-box {
    width: 285px;
    height: 190px;
    margin-left: calc(50% - 142px);
    background-size: 100% 100%;
  }
  p {
    width: 285px;
    margin-left: calc(50% - 142px);
  }
  .bottom-info {
    width: 285px;
    display: flex;
    margin-left: calc(50% - 142px);
    justify-content: space-between;
    margin-bottom: 10px;
    .user-info {
      margin-top: -5px;
      img {
        width: 35px;
        height: 35px;
        display: inline-block;
        border: 1px solid #333;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
}
:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
